<template>
  <div class="app-container">
    <h1
      style="text-align:right;font-size:.3rem;padding-top:.3rem"
      @click="$router.back()"
    >
      取消
    </h1>
    <h1 class="title">添加银行卡</h1>
    <div class="main">
      <div class="label">卡号:</div>
      <div class="card-box">
        <yd-input
          type="text"
          placeholder="请输入您的银行卡号"
          v-model="form.card"
        />
      </div>
    </div>
    <div class="main">
      <div class="label">持卡人:</div>
      <div class="card-box">
        <yd-input
          type="text"
          placeholder="请输入持卡人姓名"
          v-model="form.name"
        />
      </div>
    </div>
    <div class="main">
      <div class="label">电话:</div>
      <div class="card-box">
        <yd-input
          type="text"
          placeholder="请输入银行卡的预留手机号"
          v-model="form.phone"
        />
      </div>
    </div>
    <yd-button
      size="large"
      :type="isCanSubmit"
      @click.native="submit"
      class="btn"
      >提交卡号</yd-button
    >
    <div class="info">
      已支持
      <b v-for="i in supportList" :key="i.name">{{ i.name }}</b>
    </div>
  </div>
</template>
<script>
import { bindBankCard, bankList } from '@/api';
export default {
  name: 'bindCard',
  data() {
    return {
      form: {
        card: '',
        name: '',
        phone: ''
      },
      supportList: []
    };
  },
  mounted() {
    this.getBankList();
  },
  methods: {
    getBankList() {
      bankList().then(res => {
        this.supportList = res.data.result;
      });
    },
    submit() {
      bindBankCard({
        userId: 25,
        bankId: '1',
        bankCard: '6214832920400863',
        name: '李冰心',
        cardNo: '612522199604194013',
        phone: '18829292624'
      }).then(res => {
        console.log(res);
      });
    }
  },
  computed: {
    isCanSubmit() {
      return /^\d{16}$/g.test(this.form.card) &&
        /^1[23456789]\d{9}$/g.test(this.form.phone) &&
        this.form.name
        ? 'primary'
        : 'disabled';
    }
  }
};
</script>
<style lang="less" scoped>
.app-container {
  background: white;
  padding: 0 0.15rem 0.5rem;

  .title {
    font-size: 0.5rem;
    color: #000;
    font-weight: 500;
    padding: 0.4rem 0 0.6rem;
  }

  .main {
    display: flex;
    padding: 0.15rem;

    .label {
      width: 1.2rem;
      font-size: 0.36rem;
      margin-right: 0.4rem;
      text-align: right;
      text-align: justify;
      text-align-last: justify;
      font-weight: 500;
    }

    .card-box {
      flex: 1;

      /deep/ input {
        font-size: 0.36rem;
        font-weight: 500;
        color: gray;
      }
    }
  }

  .info {
    width: 100%;
    height: 0.8rem;
    border-radius: 0.1rem;
    border: 1px solid rgba(70, 151, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.15rem;

    b {
      padding: 0 0.1rem;
      border-left: 1px solid #eee;

      &:first-child {
        border: 0;
      }
    }
  }
}

.btn {
  font-size: 0.36rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  border-radius: 0.15rem;
}
</style>
